import { message, Button, Table, Tabs, Typography, Divider, Popconfirm, DatePicker, Select,notification } from 'antd'
import React, { useState, useRef, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect, history } from 'umi'
import {
  getSecurityRecordList,
  updateRecordStatus,
  saveMakeUp,
  updateSecurityRecord,
  deleteSecurityRecord,
  removeAllRecord,
  removeRecordList,
  refreshSecurityRecord
} from '../service'
import moment from 'moment'
import CreateForm from './components/CreateForm'
import CreateMakeUpForm from './components/CreateMakeUpForm'
import CreateUpdateForm from './components/CreateUpdateForm'
import '@/global.less'
import { getCompanyListAuth } from '@/pages/Security/service'

const { TabPane } = Tabs
const { Text } = Typography
const { Option } = Select

const TableList = () => {
  const actionRef = useRef()
  const actionRef1 = useRef()
  const actionRef2 = useRef()
  const form = useRef()
  const form2 = useRef()
  const [operationType, setOperationType] = useState('')
  const [visible, setVisible] = useState(false)
  const [makeUpVisible, setMakeUpVisible] = useState(false)
  const [updateVisible, setUpdateVisible] = useState(false)
  const [tabIndex, setTabIndex] = useState('0')
  const [remittanceLoading, setRemittanceLoading] = useState(false)
  const [confirmLoading, setConfirmLoading] = useState(false)
  const [current, setCurrent] = useState(null)
  const [selectionType, setSelectionType] = useState('checkbox')
  const [selectedRows, setSelectedRows] = useState([])
  const [tableData, setTableData] = useState([])
  const [contractData, setContractData] = useState([])
  const [refreshLoading,setRefreshLoading] = useState(false);
  const [disabled,setDisabled] = useState(false);

  useEffect(() => {
    getCompanyListAuth().then(res => {
      if(res.flag){
        res && setContractData(res.data)
      }else{
        notification.error({
          message: `请求错误 ${res.status}`,
          description: res.error,
        });
      }
    })
  }, [])

  const rowSelection = {
    onChange: (rowKeys, rows) => {
      setSelectedRows(rows)
    }
  }

  const handleChangTabIndex = (key) => {
    setTabIndex(key)
    if (key === '0') {
      actionRef.current && actionRef.current.reload()
    } else if (key === '1') {
      actionRef1.current && actionRef1.current.reload()
    } else if (key === '3') {
      actionRef2.current && actionRef2.current.reload()
    }
  }

  const remittance = () => {
    if (selectedRows.length > 0) {
      setOperationType('remittance')
      setVisible(true)
      setCurrent(selectedRows)
    } else {
      message.info('请选择台账明细！')
    }
  }

  const remittanceAll = () => {
    setRemittanceLoading(true)
    let unitId = form.current.getFieldValue('unitId')
    updateRecordStatus({ isAll: 1, status: 0, unitId }).then(res => {
      if (res.flag) {
        message.success('全部汇缴成功！')
        actionRef.current.reload()
      } else {
        message.error(res.error)
      }
      setRemittanceLoading(false)
    })
  }

  const refreshData = () =>{
    let unitId = form.current.getFieldValue('unitId');
    if(!unitId){
      message.error("请先选择汇缴公司！");
      return;
    }
    setRefreshLoading(true);
    setDisabled(true);
    refreshSecurityRecord(unitId,0).then(res =>{
      if (res.flag) {
        message.success('汇缴数据刷新成功！')
        actionRef.current.reload();
      } else {
        message.error(res.error)
      }
      setRefreshLoading(false);
      setDisabled(false);
    })
  };

  const exportAll = () => {
    let unitId = form.current.getFieldValue('unitId')
    let unitName = contractData.find(item => unitId.toString() === item.id.toString()).name
    window.open(`/hr-ssc/api/api-admin/export/exportSecurityRecordAll?unitName=${unitName}&isConfirm=0&isCheck=0`)
  }

  const removeAll = () => {
    let unitId = form.current.getFieldValue('unitId')
    removeAllRecord(unitId).then(res => {
      if (res.flag) {
        message.success('全部删除成功！')
        actionRef.current.reload()
      } else {
        message.error(res.error)
      }
      setConfirmLoading(false)
    })
  }

  const removeList = () => {
    if (selectedRows.length > 0) {
      removeRecordList(selectedRows.map(item => (item.recordId))).then(res => {
        if (res.flag) {
          message.success('删除成功！')
          actionRef.current.reload()
        } else {
          message.error(res.error)
        }
        setConfirmLoading(false)
      })
    } else {
      message.info('请勾选台账记录！')
    }
  }

  const showMakeUp = (record) => {
    // setOperationType('makeUp');
    // setVisible(true);
    setMakeUpVisible(true)
    setCurrent([record])
  }

  const showUpdate = (record) => {
    setUpdateVisible(true)
    setCurrent([record])
  }

  const confirmRemittanceAll = () => {
    setConfirmLoading(true)
    let unitId = form2.current.getFieldValue('unitId')
    updateRecordStatus({ isAll: 1, status: 1, unitId }).then(res => {
      if (res.flag) {
        message.success('全部确认成功！')
        actionRef.current.reload()
      } else {
        message.error(res.error)
      }
      setConfirmLoading(false)
    })
  }

  const confirmRemittance = () => {
    if (selectedRows.length > 0) {
      updateRecordStatus({ recordIds: selectedRows.map(item => (item.recordId)), status: 1 }).then(res => {
        if (res.flag) {
          message.success('确认成功！')
          actionRef1.current.reload()
        } else {
          message.error(res.error)
        }
      })
    } else {
      message.info('请选择确认项！')
    }
  }

  const makeUpCancel = () => {
    setMakeUpVisible(false)
    setCurrent(null)
  }

  const updateCancel = () => {
    setUpdateVisible(false)
    setCurrent(null)
  }

  const handleCancel = () => {
    setVisible(false)
    setCurrent(null)
  }

  const handleSubmit = (values) => {
    updateRecordStatus({ recordIds: values.map(item => (item.recordId)), status: 0 }).then(res => {
      setVisible(false)
      setCurrent(null)
      if (res.flag) {
        message.success('汇缴成功！')
        actionRef.current.reload()
      } else {
        message.error(res.error)
      }
    })
  }

  const makeUpSubmit = (values, date) => {
    if (date) {
      let data = {
        // oid: values[0].oid,
        time: date,
        // type: values[0].type
        ...values[0]
      }
      saveMakeUp(data).then(res => {
        setMakeUpVisible(false)
        setCurrent(null)
        if (res.flag) {
          message.success('补缴成功！')
          actionRef.current.reload()
        } else {
          message.error(res.error)
        }
      })
    } else {
      message.info('请选择补缴月份！')
    }
  }

  const updateSubmit = (values) => {
    let data = {
      ...values[0],
      personCostTotal: (parseFloat(values[0].disabledEmploymentPerson) + parseFloat(values[0].endowmentInsurancePerson) + parseFloat(values[0].injuryInsurancePerson) + parseFloat(values[0].largerMedicalPerson) + parseFloat(values[0].maternityInsurancePerson) + parseFloat(values[0].medicalInsurancePerson) + parseFloat(values[0].unemploymentInsurancePerson)).toFixed(2),
      orgCostTotal: (parseFloat(values[0].disabledEmploymentOrg) + parseFloat(values[0].endowmentInsuranceOrg) + parseFloat(values[0].injuryInsuranceOrg) + parseFloat(values[0].largerMedicalOrg) + parseFloat(values[0].maternityInsuranceOrg) + parseFloat(values[0].medicalInsuranceOrg) + parseFloat(values[0].unemploymentInsuranceOrg)).toFixed(2),
    }
    updateSecurityRecord(data).then(res => {
      setUpdateVisible(false)
      setCurrent(null)
      if (res.flag) {
        message.success('修改成功！')
        actionRef.current.reload()
      } else {
        message.error(res.error)
      }
    })
  }

  const columns = [
    {
      title: '序号',
      fixed: 'left',
      width: 50,
      align: 'center',
      dataIndex: 'promotionId',
      render: (text, record, index) => `${index + 1}`,
      hideInSearch: true,
    },
    {
      title: '姓名',
      fixed: 'left',
      width: 70,
      align: 'center',
      dataIndex: 'name',
    },
    {
      title: '参保地',
      fixed: 'left',
      width: 100,
      align: 'center',
      dataIndex: 'cityName',
      hideInSearch: true,
    },
    {
      title: '参保单位',
      align: 'center',
      width: 150,
      fixed: 'left',
      dataIndex: 'unitName',
      hideInSearch: true
    },
    {
      title: '参保单位',
      dataIndex: 'unitId',
      hideInTable: true,
      renderFormItem: (item, props) => {
        return <Select placeholder="请选择参保单位" showSearch filterOption={(input, option) =>
          option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
          {contractData.length > 0 ? contractData.map((item, index) => {
            return (
              <Option value={item.id} key={index} lable={item}>
                {item.name}
              </Option>
            )
          }) : ''}
        </Select>
      },
    },
    {
      title: '缴费时间',
      fixed: 'left',
      width: 100,
      align: 'center',
      dataIndex: 'operateTime',
      hideInSearch: tabIndex !== '3',
      renderFormItem: (item, props) => {
        return <DatePicker {...props} picker="month"/>
      },
      render: (text) => {
        return text !== '-' ? moment(text).format('YYYY-MM') : ''
      }
    },
    {
      title: '养老保险',
      children: [
        {
          title: '基数',
          dataIndex: 'endowmentInsuranceBase',
          hideInSearch: true,
        },
        {
          title: '个人',
          children: [
            {
              title: '缴纳',
              dataIndex: 'endowmentInsurancePerson',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'endowmentInsurancePersonRate',
              hideInSearch: true,
              render: (text) => {
                return text ? `${text}%` : text
              }
            },
          ]
        },
        {
          title: '公司',
          children: [
            {
              title: '缴纳',
              dataIndex: 'endowmentInsuranceOrg',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'endowmentInsuranceOrgRate',
              hideInSearch: true,
              render: (text) => {
                return text ? `${text}%` : text
              }
            },
          ]
        }
      ]
    },
    {
      title: '工伤保险',
      children: [
        {
          title: '基数',
          dataIndex: 'injuryInsuranceBase',
          hideInSearch: true,
        },
        {
          title: '个人',
          children: [
            {
              title: '缴纳',
              dataIndex: 'injuryInsurancePerson',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'injuryInsurancePersonRate',
              hideInSearch: true,
              render: (text) => {
                return text ? `${text}%` : text
              }
            },
          ]
        },
        {
          title: '公司',
          children: [
            {
              title: '缴纳',
              dataIndex: 'injuryInsuranceOrg',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'injuryInsuranceOrgRate',
              hideInSearch: true,
              render: (text) => {
                return text ? `${text}%` : text
              }
            },
          ]
        }
      ]
    },
    {
      title: '重大医疗',
      children: [
        {
          title: '基数',
          dataIndex: 'largerMedicalBas',
          hideInSearch: true,
        },
        {
          title: '个人',
          children: [
            {
              title: '缴纳',
              dataIndex: 'largerMedicalPerson',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'largerMedicalPersonRate',
              hideInSearch: true,
              render: (text) => {
                return text ? `${text}%` : text
              }
            },
          ]
        },
        {
          title: '公司',
          children: [
            {
              title: '缴纳',
              dataIndex: 'largerMedicalOrg',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'largerMedicalOrgRate',
              hideInSearch: true,
              render: (text) => {
                return text ? `${text}%` : text
              }
            },
          ]
        }
      ]
    },
    {
      title: '医疗保险',
      children: [
        {
          title: '基数',
          dataIndex: 'medicalInsuranceBase',
          hideInSearch: true,
        },
        {
          title: '个人',
          children: [
            {
              title: '缴纳',
              dataIndex: 'medicalInsurancePerson',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'medicalInsurancePersonRate',
              hideInSearch: true,
              render: (text) => {
                return text ? `${text}%` : text
              }
            },
          ]
        },
        {
          title: '公司',
          children: [
            {
              title: '缴纳',
              dataIndex: 'medicalInsuranceOrg',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'medicalInsuranceOrgRate',
              hideInSearch: true,
              render: (text) => {
                return text ? `${text}%` : text
              }
            },
          ]
        }
      ]
    },
    {
      title: '失业保险',
      children: [
        {
          title: '基数',
          dataIndex: 'unemploymentInsuranceBase',
          hideInSearch: true,
        },
        {
          title: '个人',
          children: [
            {
              title: '缴纳',
              dataIndex: 'unemploymentInsurancePerson',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'unemploymentInsurancePersonRate',
              hideInSearch: true,
              render: (text) => {
                return text ? `${text}%` : text
              }
            },
          ]
        },
        {
          title: '公司',
          children: [
            {
              title: '缴纳',
              dataIndex: 'unemploymentInsuranceOrg',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'unemploymentInsuranceOrgRate',
              hideInSearch: true,
              render: (text) => {
                return text ? `${text}%` : text
              }
            },
          ]
        }
      ]
    },
    {
      title: '残疾保障金',
      children: [
        {
          title: '基数',
          dataIndex: 'disabledEmploymentBase',
          hideInSearch: true,
        },
        {
          title: '个人',
          children: [
            {
              title: '缴纳',
              dataIndex: 'disabledEmploymentPerson',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'disabledEmploymentPersonRate',
              hideInSearch: true,
              render: (text) => {
                return text ? `${text}%` : text
              }
            },
          ]
        },
        {
          title: '公司',
          children: [
            {
              title: '缴纳',
              dataIndex: 'disabledEmploymentOrg',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'disabledEmploymentOrgRate',
              hideInSearch: true,
              render: (text) => {
                return text ? `${text}%` : text
              }
            },
          ]
        }
      ]
    },
    {
      title: '生育保险',
      children: [
        {
          title: '基数',
          dataIndex: 'maternityInsuranceBase',
          hideInSearch: true,
        },
        {
          title: '个人',
          children: [
            {
              title: '缴纳',
              dataIndex: 'maternityInsurancePerson',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'maternityInsurancePersonRate',
              hideInSearch: true,
              render: (text) => {
                return text ? `${text}%` : text
              }
            },
          ]
        },
        {
          title: '公司',
          children: [
            {
              title: '缴纳',
              dataIndex: 'maternityInsuranceOrg',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'maternityInsuranceOrgRate',
              hideInSearch: true,
              render: (text) => {
                return text ? `${text}%` : text
              }
            },
          ]
        }
      ]
    },
    {
      title: '合计',
      children: [
        {
          title: '个人',
          align: 'center',
          dataIndex: 'personCostTotal',
          hideInSearch: true,
        },
        {
          title: '公司',
          align: 'center',
          dataIndex: 'orgCostTotal',
          hideInSearch: true,
        },
      ]
    },
    {
      title: '操作',
      align: 'center',
      fixed: 'right',
      hideInTable: tabIndex === '3',
      dataIndex: 'option',
      valueType: 'option',
      render: (item, record) => (
        <>
          <a onClick={() => showUpdate(record)}>修改</a>
          <Divider type="vertical"/>
          <a onClick={() => showMakeUp(record)}>补缴</a>
          <Divider type="vertical"/>
          <Popconfirm title={`是否确认删除?`} onConfirm={() => deleteLedger(record.recordId)} okText="是" cancelText="否">
            <a>删除</a>
          </Popconfirm>
        </>
      ),
    },
  ]

  const deleteLedger = (recordId) => {
    deleteSecurityRecord(recordId).then(res => {
      if (res.flag) {
        message.success('台账删除成功')
      } else {
        message.error(res.error)
      }
      if (tabIndex === '0') {
        actionRef.current && actionRef.current.reload()
      } else if (tabIndex === '1') {
        actionRef1.current && actionRef1.current.reload()
      }
    })
  }

  const setTotalRow = () => {
    let sumObj = {
      endowmentInsurancePersonSum: 0,
      endowmentInsuranceOrgSum: 0,
      injuryInsurancePersonSum: 0,
      injuryInsuranceOrgSum: 0,
      largerMedicalPersonSum: 0,
      largerMedicalOrgSum: 0,
      medicalInsurancePersonSum: 0,
      medicalInsuranceOrgSum: 0,
      unemploymentInsurancePersonSum: 0,
      unemploymentInsuranceOrgSum: 0,
      disabledEmploymentPersonSum: 0,
      disabledEmploymentOrgSum: 0,
      maternityInsurancePersonSum: 0,
      maternityInsuranceOrgSum: 0,
      personCostTotalSum: 0,
      orgCostTotalSum: 0
    }
    tableData?.forEach(({
      endowmentInsurancePerson, endowmentInsuranceOrg, injuryInsurancePerson, injuryInsuranceOrg,
      largerMedicalPerson, largerMedicalOrg, medicalInsurancePerson, medicalInsuranceOrg,
      unemploymentInsurancePerson, unemploymentInsuranceOrg, disabledEmploymentPerson,
      disabledEmploymentOrg, maternityInsurancePerson, maternityInsuranceOrg, personCostTotal, orgCostTotal
    }) => {
      sumObj.endowmentInsurancePersonSum += endowmentInsurancePerson
      sumObj.endowmentInsuranceOrgSum += endowmentInsuranceOrg
      sumObj.injuryInsurancePersonSum += injuryInsurancePerson
      sumObj.injuryInsuranceOrgSum += injuryInsuranceOrg
      sumObj.largerMedicalPersonSum += largerMedicalPerson
      sumObj.largerMedicalOrgSum += largerMedicalOrg
      sumObj.medicalInsurancePersonSum += medicalInsurancePerson
      sumObj.medicalInsuranceOrgSum += medicalInsuranceOrg
      sumObj.unemploymentInsurancePersonSum += unemploymentInsurancePerson
      sumObj.unemploymentInsuranceOrgSum += unemploymentInsuranceOrg
      sumObj.disabledEmploymentPersonSum += disabledEmploymentPerson
      sumObj.disabledEmploymentOrgSum += disabledEmploymentOrg
      sumObj.maternityInsurancePersonSum += maternityInsurancePerson
      sumObj.maternityInsuranceOrgSum += maternityInsuranceOrg
      sumObj.personCostTotalSum += personCostTotal
      sumObj.orgCostTotalSum += orgCostTotal
    })

    return (
      <>
        <Table.Summary.Row>
          <Table.Summary.Cell colSpan={tabIndex !== '3' ? 5 : 4} index={0}
                              className='textCenter'>小计</Table.Summary.Cell>
          <Table.Summary.Cell/>
          <Table.Summary.Cell/>
          <Table.Summary.Cell>
            <Text>{sumObj.endowmentInsurancePersonSum.toFixed(2)}</Text>
          </Table.Summary.Cell>
          <Table.Summary.Cell/>
          <Table.Summary.Cell>
            <Text>{sumObj.endowmentInsuranceOrgSum.toFixed(2)}</Text>
          </Table.Summary.Cell>
          <Table.Summary.Cell/>
          <Table.Summary.Cell/>
          <Table.Summary.Cell>
            <Text>{sumObj.injuryInsurancePersonSum.toFixed(2)}</Text>
          </Table.Summary.Cell>
          <Table.Summary.Cell/>
          <Table.Summary.Cell>
            <Text>{sumObj.injuryInsuranceOrgSum.toFixed(2)}</Text>
          </Table.Summary.Cell>
          <Table.Summary.Cell/>
          <Table.Summary.Cell/>
          <Table.Summary.Cell>
            <Text>{sumObj.largerMedicalPersonSum.toFixed(2)}</Text>
          </Table.Summary.Cell>
          <Table.Summary.Cell/>
          <Table.Summary.Cell>
            <Text>{sumObj.largerMedicalOrgSum.toFixed(2)}</Text>
          </Table.Summary.Cell>
          <Table.Summary.Cell/>
          <Table.Summary.Cell/>
          <Table.Summary.Cell>
            <Text>{sumObj.medicalInsurancePersonSum.toFixed(2)}</Text>
          </Table.Summary.Cell>
          <Table.Summary.Cell/>
          <Table.Summary.Cell>
            <Text>{sumObj.medicalInsuranceOrgSum.toFixed(2)}</Text>
          </Table.Summary.Cell>
          <Table.Summary.Cell/>
          <Table.Summary.Cell/>
          <Table.Summary.Cell>
            <Text>{sumObj.unemploymentInsurancePersonSum.toFixed(2)}</Text>
          </Table.Summary.Cell>
          <Table.Summary.Cell/>
          <Table.Summary.Cell>
            <Text>{sumObj.unemploymentInsuranceOrgSum.toFixed(2)}</Text>
          </Table.Summary.Cell>
          <Table.Summary.Cell/>
          <Table.Summary.Cell/>
          <Table.Summary.Cell>
            <Text>{sumObj.disabledEmploymentPersonSum.toFixed(2)}</Text>
          </Table.Summary.Cell>
          <Table.Summary.Cell/>
          <Table.Summary.Cell>
            <Text>{sumObj.disabledEmploymentOrgSum.toFixed(2)}</Text>
          </Table.Summary.Cell>
          <Table.Summary.Cell/>
          <Table.Summary.Cell/>
          <Table.Summary.Cell>
            <Text>{sumObj.maternityInsurancePersonSum.toFixed(2)}</Text>
          </Table.Summary.Cell>
          <Table.Summary.Cell/>
          <Table.Summary.Cell>
            <Text>{sumObj.maternityInsuranceOrgSum.toFixed(2)}</Text>
          </Table.Summary.Cell>
          <Table.Summary.Cell index={tabIndex !== '3' ? 40 : 39}/>
          <Table.Summary.Cell className='textCenter' index={tabIndex !== '3' ? 41 : 40}>
            <Text>{sumObj.personCostTotalSum.toFixed(2)}</Text>
          </Table.Summary.Cell>
          <Table.Summary.Cell className='textCenter' index={tabIndex !== '3' ? 42 : 41}>
            <Text>{sumObj.orgCostTotalSum.toFixed(2)}</Text>
          </Table.Summary.Cell>
          {tabIndex !== '3' && <Table.Summary.Cell className='textCenter' index={43}/>}
        </Table.Summary.Row>
      </>
    )
  }

  return (
    <PageHeaderWrapper>
      {
        contractData.length > 0 &&
        <Tabs defaultActiveKey="0" animated={false} onChange={handleChangTabIndex}>
          <TabPane tab="未汇缴" key="0" disabled={disabled}>
            <ProTable
              loading={disabled}
              bordered
              scroll={{ x: '250%' }}
              actionRef={actionRef}
              formRef={form}
              form={{ initialValues: { unitId: contractData[0].id } }}
              rowKey="recordId"
              rowSelection={{
                type: selectionType,
                ...rowSelection,
              }}
              request={(params) => getSecurityRecordList(params, 0, 0).then(res => {
                setTableData(res.data)
                return res
              })}
              columns={columns}
              onReset={() => {
                form.current.setFieldsValue({ unitId: contractData[0].id })
              }}
              toolBarRender={(action, { selectedRows }) => [
                // 老蔡要求先注释该功能，因为刷新方案会先执行删除当前月数据  czw 2021-04-07
                // <Popconfirm
                //   title="此操作将删除当前方案下台账所有记录，是否确认操作？"
                //   onConfirm={removeAll}
                //   okText="确认"
                //   cancelText="取消"
                // >
                //   <Button key='button'>全部删除</Button>
                // </Popconfirm>,
                <Popconfirm
                  title="此操作将删勾选的台账所有记录，是否确认操作？"
                  onConfirm={removeList}
                  okText="确认"
                  cancelText="取消"
                >
                  <Button key='button'>选择删除</Button>
                </Popconfirm>,
                <Popconfirm
                  title="此操作将导出本次汇缴期所选单位的全部数据，是否确认操作？"
                  onConfirm={exportAll}
                  okText="确认"
                  cancelText="取消"
                >
                  <Button key='button' type="primary">全部导出</Button>
                </Popconfirm>,
                <Popconfirm
                  title="此操作会将当前筛选缴纳单位中的所有数据进行汇缴，是否确认操作？"
                  onConfirm={remittanceAll}
                  okText="确认"
                  cancelText="取消"
                >
                  <Button key='button' loading={remittanceLoading} type="primary">全部汇缴</Button>
                </Popconfirm>,
                // 奇葩用户太多，老蔡要求注释 czw 2021-04-09
                // <Button key='button' type="primary" onClick={() => remittance()}>选择汇缴</Button>,
                <Popconfirm
                  title="此操作将会重新计算汇缴数据，是否确认操作？"
                  onConfirm={refreshData}
                  okText="确认"
                  cancelText="取消"
                >
                  <Button key='button' danger loading={refreshLoading}>刷新台账</Button>
                </Popconfirm>,
              ]}
              summary={setTotalRow}
              pagination={{ pageSizeOptions: ['20', '50', '100', '200', '500'] }}
            />
          </TabPane>
          <TabPane tab="已汇缴" key="1" disabled={disabled}>
            <ProTable
              bordered
              scroll={{ x: '250%' }}
              actionRef={actionRef1}
              formRef={form2}
              form={{ initialValues: { unitId: contractData[0].id } }}
              rowKey="recordId"
              request={(params) => getSecurityRecordList(params, 0, 1).then(res => {
                setTableData(res.data)
                return res
              })}
              columns={columns}
              rowSelection={{
                type: selectionType,
                ...rowSelection,
              }}
              onReset={() => {
                form2.current.setFieldsValue({ unitId: contractData[0].id })
              }}
              toolBarRender={(action, { selectedRows }) => [
                <Popconfirm
                  title="此操作会将当前筛选缴纳单位中的所有数据进行确认，是否确认操作？"
                  onConfirm={confirmRemittanceAll}
                  okText="确认"
                  cancelText="取消"
                >
                  <Button key='button' loading={confirmLoading} type="primary">确认汇缴</Button>
                </Popconfirm>,
                // 奇葩用户太多，老蔡要求注释 czw 2021-04-09
                // <Button key='button' type="primary" onClick={() => confirmRemittance()}>选择确认</Button>
              ]}
              summary={setTotalRow}
            />
          </TabPane>
          <TabPane tab="已确认" key="3" disabled={disabled}>
            <ProTable
              bordered
              scroll={{ x: '250%' }}
              actionRef={actionRef2}
              rowKey="recordId"
              request={(params) => getSecurityRecordList(params, 1).then(res => {
                setTableData(res.data)
                return res
              })}
              columns={columns}
              summary={setTotalRow}
            />
          </TabPane>
        </Tabs>
      }

      <CreateForm
        operationType={operationType}
        current={current}
        visible={visible}
        makeUpSubmit={makeUpSubmit}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
      />

      <CreateMakeUpForm
        visible={makeUpVisible}
        current={current}
        makeUpSubmit={makeUpSubmit}
        onCancel={makeUpCancel}
      />

      <CreateUpdateForm
        visible={updateVisible}
        current={current}
        onSubmit={updateSubmit}
        onCancel={updateCancel}
      />

    </PageHeaderWrapper>
  )
}

export default connect(({}) => ({}))(TableList)
